<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <div>
      <el-button class="btn" type="primary" plain size="small" @click="add">添加</el-button>
    </div>
    <!-- 列表的渲染 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框的渲染 -->
    <v-dialog ref="dialogInfo" :isAdd="isAdd" @cancel="cancel" :isShow="isShow"></v-dialog>
  </div>
</template>
<script>
//引入list组件
import vList from "./list.vue";
//引入弹框
import vDialog from "./dialog";
export default {
  data() {
    return {
      //设置一个属性用于控制子组件弹框的渲染
      isShow: false,
      //判断弹框是添加还是编辑
      isAdd: true
    };
  },
  components:{
      vList,
      vDialog
  },
  methods:{
      //控制弹窗的显示
      add(){
          this.isShow = true
          this.isAdd = true
      },
      //关闭弹窗
      cancel(e){
          this.isShow = e
      },
      //打开弹窗编辑
      edit(e){
          this.isShow = true
          this.isAdd = false
          this.$refs.dialogInfo.lookup(e)
      }
  }
};
</script>
<style scoped>
.btn{
    margin: 10px;
}
</style>